<template>
  <view class="container">
    <!-- 装饰背景 -->
    <view class="bg-decoration"></view>
    <view class="form-card">
      <text class="form-title">用户登录</text>
      <!-- 用户名输入框 -->
      <view class="input-wrapper">
        <uni-icons type="person" size="22" color="#666" class="input-icon"></uni-icons>
        <input 
          class="input-field" 
          placeholder="请输入用户名" 
          v-model="username" 
          placeholder-class="input-placeholder"
        />
      </view>
      <!-- 密码输入框 -->
      <view class="input-wrapper">
        <uni-icons type="locked" size="22" color="#666" class="input-icon"></uni-icons>
        <input 
          class="input-field" 
          placeholder="请输入密码" 
          password
          v-model="password" 
          :focus="isPwdfocus" 
          @blur="isPwdfocus = false" 
          placeholder-class="input-placeholder"
        />
      </view>
      <!-- 登录按钮 -->
      <button class="action-btn" type="primary" @click="handleLogin">
        <text class="btn-text">登录</text>
      </button>
      <!-- 注册跳转 -->
      <view class="link-area">
        <text class="link-text">没有账号？</text>
        <navigator url="/pages/register/register" class="link-btn">去注册</navigator>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      isPwdfocus: true
    };
  },
  methods: {
    handleLogin() {
      // 保留原有登录逻辑
      if (!this.username.trim() || !this.password.trim()) {
        uni.showToast({
          title: '请输入完整信息',
          icon: 'none'
        });
        return;
      }

      uni.showLoading({ title: '登录中...' });

      uniCloud.callFunction({
        name: 'checkUser',
        data: {
          username: this.username,
          password: this.password
        },
        success: (res) => {
          uni.hideLoading();
          const result = res.result;
          console.log('登录结果：', result);

          if (result.code === 200) {
            uni.setStorageSync('userInfo', result.data);
            uni.showToast({ title: '登录成功' });
            uni.switchTab({ url: "/pages/news/news" });
          } else if (result.code === 300) {
            uni.showToast({ title: result.msg, icon: 'none' });
          } else if (result.code === 401) {
            uni.showToast({ title: result.msg, icon: 'none' });
            this.password = '';
            this.isPwdfocus = true;
          } else {
            uni.showToast({ title: result.msg || '登录失败', icon: 'none' });
          }
        },
        fail: (error) => {
          uni.hideLoading();
          console.error('登录请求失败：', error);
          uni.showToast({ title: '网络异常，请重试', icon: 'none' });
        }
      });
    }
  }
};
</script>

<style scoped>
/* 全局容器 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #e8f4f8 0%, #f0f8fb 100%);
  padding: 30rpx 20rpx;
  box-sizing: border-box;
  position: relative;
}

/* 装饰背景 */
.bg-decoration {
  position: absolute;
  top: 10%;
  right: 5%;
  width: 200rpx;
  height: 200rpx;
  background: linear-gradient(45deg, #4299e1, #38b2ac);
  border-radius: 50%;
  opacity: 0.1;
  filter: blur(60rpx);
}

/* 表单卡片 */
.form-card {
  width: 100%;
  max-width: 450rpx;
  background: #ffffff;
  padding: 60rpx 40rpx;
  border-radius: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(66, 153, 225, 0.1);
  position: relative;
  z-index: 1;
}

/* 表单标题 */
.form-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #2d3748;
  text-align: center;
  margin-bottom: 50rpx;
  display: block;
}

/* 输入框容器 */
.input-wrapper {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 0 20rpx;
  margin-bottom: 25rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
}

/* 输入框悬浮效果 */
.input-wrapper:hover {
  border-color: #4299e1;
  box-shadow: 0 0 0 4rpx rgba(66, 153, 225, 0.1);
}

/* 输入框图标 */
.input-icon {
  margin-right: 15rpx;
}

/* 输入框样式 */
.input-field {
  flex: 1;
  height: 88rpx;
  font-size: 28rpx;
  color: #2d3748;
  background: transparent;
  border: none;
  outline: none;
}

/* 占位符样式 */
.input-placeholder {
  color: #a0aec0;
  font-size: 26rpx;
}

/* 登录按钮 */
.action-btn {
  width: 100%;
  height: 90rpx;
  background: linear-gradient(90deg, #4299e1 0%, #38b2ac 100%);
  border-radius: 12rpx;
  border: none;
  margin-top: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 6rpx 16rpx rgba(66, 153, 225, 0.3);
  transition: all 0.3s ease;
}

.action-btn:active {
  transform: scale(0.98);
  box-shadow: 0 3rpx 8rpx rgba(66, 153, 225, 0.2);
}

/* 按钮文字 */
.btn-text {
  font-size: 30rpx;
  font-weight: 500;
  color: #ffffff;
}

/* 链接区域 */
.link-area {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40rpx;
}

/* 链接文字 */
.link-text {
  font-size: 26rpx;
  color: #718096;
}

/* 注册链接 */
.link-btn {
  font-size: 26rpx;
  color: #4299e1;
  margin-left: 10rpx;
  text-decoration: none;
  font-weight: 500;
  padding: 5rpx 10rpx;
  border-radius: 6rpx;
  transition: all 0.2s ease;
}

.link-btn:hover {
  background: rgba(66, 153, 225, 0.1);
}
</style>